<template>
	<view class="app-container" :style="{ backgroundImage: 'url(' + fileUrl + content.path + ')' }">
		<view style="position: fixed;top: 0;z-index: 99;">
			<view class="status_bar"></view>
			<view class="cu-bar text-white">
				<view class="action" @tap="navTo">
					<text class="cuIcon-back"></text>
					返回
				</view>
			</view>
		</view>
		<authorize @onLoadFun="onLoadFun" v-model="isHidden" isGoIndex></authorize>
		<view class="content">
			<view class="coupon-wrap">
				<view v-for="(item, index) in list" :key="index">
					<!-- 判断优惠券是否失效 1:失效 -->
					<view v-for="xItem in item.restrict_number" :key="xItem" class="flex justify-center coupon-item">
						<view
							class="stamp"
							:class="{ 'light bg-grey': item.already_received_total >= item.restrict_number || xItem + 1 <= item.already_received_total }"
							:style="{ background: 'radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px, ' + content.coupon_color + ' 4px)' }"
						>
							<view class="stamp-before" :class="{ 'light bg-grey': item.already_received_total >= item.restrict_number || xItem + 1 <= item.already_received_total }" :style="{ background: content.coupon_color }"></view>
							<view class="par">
								<text>{{ item.name }}</text>
								<!-- 判断优惠券类型 1:折扣 -->
								<view class="block" v-if="item.type">
									<text class="sign">￥</text>
									<text class="price">{{ item.discount }}</text>
									<text class="sub">折</text>
								</view>
								<!-- 判断优惠券类型 0:立减 -->
								<view class="block" v-else>
									<text class="sign">￥</text>
									<text class="price">{{ item.subtract_price }}</text>
									<text class="sub">立减</text>
								</view>
								<text>{{ item.full_price > 0 ? `订单满${item.full_price}元使用` : '无门槛优惠券' }}</text>
							</view>
							<view class="copy">
								<view>有限期至</view>
								<!-- 判断是否固定日期 1:是固定日期 -->
								<view class="margin-top-xs" v-if="item.is_fixed_date">{{ item.expiry_date }}</view>
								<!-- 判断是否固定日期 0:不是固定日期 -->
								<view class="margin-top-xs" v-else>{{ item.expiry_day | filterExpiryDay }}</view>
								<button @click="toggleCoupon(item)" class="cu-btn margin-top" :disabled="item.already_received_total >= item.restrict_number || xItem + 1 <= item.already_received_total">
									{{ filterStatus(item, content) }}
								</button>
							</view>
							<i class="i"></i>
						</view>
					</view>
				</view>
			</view>
			<view class="rules-wrap" :style="{ background: content.coupon_color }">
				<view class="title">活动规则</view>
				<rich-text :nodes="content.rule"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
import Authorize from '@/components/authorize/authorize';
import { getDiscountCouponActivityInfo, getDiscountCoupon } from '@/api/common.js';
import { VUE_APP_BASE_API } from '@/common/tools/config.js';
import { parseTime } from '@/common/tools/util.js';
import { mapGetters } from 'vuex';
export default {
	components: {
		Authorize
	},
	data() {
		return {
			fileUrl: VUE_APP_BASE_API,
			isHidden: false,
			activityId: 0,
			content: {},
			list: []
		};
	},
	computed: {
		...mapGetters(['isIphoneX'])
	},
	 onPullDownRefresh: function() {
	    this.getDetails()
	  },
	filters: {
		filterExpiryDay(day) {
			const date = new Date().getTime() + day * 1000 * 60 * 60 * 24;
			return parseTime(date);
		}
	},
	onLoad(options) {
		this.activityId = options.id;
	},
	onShareAppMessage() {
		return {
			title: '云打印 - 云端上传文件/图片即传即拿',
			desc: '锐腾网络科技',
			path: '/user-pages/activity-details'
		};
	},
	methods: {
		filterStatus(item, content) {
			const nowDate = new Date().getTime();
			const startDate = new Date(content.start_date)
			const endDate = new Date(content.end_date)
			if(startDate > nowDate && content.status === 0) {
				return '未开始'
			}else if( nowDate >= endDate || content.status === 2) {
				return '已结束'
			}else if(item.already_received_total >= item.restrict_number) {
				return '领取上限'
			}else {
				return '立即领取'
			}
			// '无法领取' : '立即使用'
		},
		onLoadFun() {
			this.getDetails();
		},
		getDetails() {
			getDiscountCouponActivityInfo({
				discount_coupon_activity_id: this.activityId
			}).then(res => {
				this.content = res.result.discountCouponActivityInfo;
				this.list = res.result.discountCouponInfoList;
			});
		},
		navTo() {
			let pages = getCurrentPages();
			let pagesLen = pages.length > 1;
			if (!pagesLen) {
				uni.switchTab({ url: '/pages/tabbar/index' });
			} else {
				uni.navigateBack();
			}
		},
		toggleCoupon(item) {
			if(item.disabled) return
			const nowDate = new Date().getTime();
			const content = this.content;
			const startDate = new Date(content.start_date)
			const endDate = new Date(content.end_date)
			if(startDate > nowDate) {
				uni.showToast({
					title: '活动暂未开始',
					icon: 'none',
					duration: 5000
				});
				return;
			}
			if( nowDate >= endDate || content.status === 2) {
				uni.showToast({
					title: '活动已经结束了',
					icon: 'none',
					duration: 5000
				});
				return;
			}
			if(item.already_received_total >= item.restrict_number) {
				uni.showToast({
					title: '优惠券领取上限',
					icon: 'none',
					duration: 5000
				});
				return;
			}
			item.disabled = true
			getDiscountCoupon({
				discount_coupon_activity_id: this.activityId,
				discount_coupon_template_id: item.discount_coupon_template_id
			})
				.then(res => {
					item.disabled = false
					uni.showToast({
						title: '领取优惠成功',
						icon: 'success',
						duration: 5000
					});
					this.getDetails()
				})
				.catch(err => {
					item.disabled = false
					uni.showToast({
						title: err.message,
						icon: 'none',
						duration: 5000
					});
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.app-container {
	width: 100%;
	height: 100%;
	background: url('https://w.wallhaven.cc/full/13/wallhaven-13mk9v.jpg') no-repeat;
	background-size: cover;
	min-height: 100vh;
	background-position: 50% 50%;
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	.content {
		margin-top: 500rpx;
		.coupon-wrap {
			padding: 20rpx;
			.coupon-item {
				.stamp-before {
					content: '';
					position: absolute;
					background-color: #50add3;
					top: 0;
					bottom: 0;
					left: 10px;
					right: 10px;
					z-index: 0;
				}
				.stamp:after {
					content: '';
					position: absolute;
					left: 10px;
					top: 10px;
					right: 10px;
					bottom: 10px;
					box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);
					z-index: -1;
				}
				.stamp {
					background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px, #50add3 4px);
					background-size: 15px 15px;
					background-position: 9px 3px;
					border-radius: 10px;
					width: 646rpx;
					height: 260rpx;
					padding: 0 20rpx;
					margin-bottom: 40rpx;
					position: relative;
					overflow: hidden;
					.par {
						float: left;
						padding: 30rpx;
						width: 400rpx;
						border-right: 4rpx dashed rgba(255, 255, 255, 0.3);
						text-align: left;
						z-index: 2;
						position: relative;
						text {
							color: #fff;
							font-size: 30rpx;
							line-height: 40rpx;
						}
						.price {
							font-size: 70rpx;
							color: #fff;
							margin-right: 10rpx;
							line-height: 130rpx;
							font-weight: 600;
						}
						.sign {
							font-size: 50rpx;
							font-weight: 600;
							margin-left: -9px;
						}
						.sub {
							font-size: 32rpx;
							position: relative;
							top: -10rpx;
							color: rgba(255, 255, 255, 0.8);
						}
					}
					.copy {
						display: inline-block;
						padding: 30rpx 0 30rpx 20rpx;
						width: 200rpx;
						vertical-align: text-bottom;
						font-size: 28rpx;
						color: rgb(255, 255, 255);
						text-align: center;
						line-height: initial;
						position: relative;
						z-index: 2;
						text {
							font-size: 32rpx;
							margin-top: 30rpx;
						}
						.btn {
							background-color: #fff;
							color: #333;
							font-size: 28rpx;
							text-decoration: none;
							padding: 10rpx;
							border-radius: 6rpx;
							display: block;
						}
					}
				}
				.stamp .i {
					position: absolute;
					left: 20%;
					top: 45px;
					height: 190px;
					width: 390px;
					background-color: rgba(255, 255, 255, 0.15);
					transform: rotate(-30deg);
				}
			}
		}
		.rules-wrap {
			margin-top: 20rpx;
			padding: 40rpx;
			height: auto;
			width: 646rpx;
			// background: #50add3;
			margin: 0 auto;
			border-radius: 20rpx;
			color: #fff;
			.title {
				font-size: 32rpx;
				text-align: center;
			}
			.text {
				margin-top: 20rpx;
			}
		}
	}
}
</style>
